<script setup>
import { getWebSite } from '~/service'
import { useGlobalStore } from '~/composables/global'
import beianImg from '@/assets/img/beian.png'

const { locale } = useLocale()
const store = useGlobalStore()
const { company } = storeToRefs(store)
const webSite = ref({})
const { resolveImgURL } = useGlobalStore()
// onMounted(async () => {
//   webSite.value = await getWebSite()
//   useHead({
//     meta: [{ hid: 'description', name: 'description', content: webSite.value.description }, { hid: 'keywords', name: 'keywords', content: webSite.value.keywords }],
//   })
// })
const { data } = await useAsyncData(getWebSite)
webSite.value = data?.value
useHead({
  meta: [{ hid: 'description', name: 'description', content: webSite.value?.description }, { hid: 'keywords', name: 'keywords', content: webSite.value?.keywords }],
})
</script>

<template>
  <div h="[var(--footer-height)]" p="x-[190px] y-[50px]" bg="[rgb(44,44,44)] [url(~/assets/img/bg_footer.png)] cover no-repeat" text="[#fff]" class="w-full max-md:hidden">
    <div class="flex justify-between" p="b-[24px]" border="b-[1px] solid [#ffffff33]">
      <div class="left-section">
        <NuxtLink to="/">
          <img data-aos="fade-down" class="mb-[24px] h-[50px] w-[200px]" :src="resolveImgURL(company?.logo_url)" />
        </NuxtLink>
        <h3 class="mb-[24px] h-[108px] text-[28px] leading-[30px]" data-aos="fade-down">
          {{ get(company, 'name', locale) }}
        </h3>
        <ul data-aos="fade-up" class="links flex items-center text-[20px] uppercase">
          <li>
            <NuxtLink to="/">
              {{ $t('footer.home') }}
            </NuxtLink>
          </li>
          <li>
            <NuxtLink to="/about">
              {{ $t('menu.about_us') }}
            </NuxtLink>
          </li>
          <li>
            <NuxtLink to="/product">
              {{ $t('menu.products') }}
            </NuxtLink>
          </li>
          <li>
            <NuxtLink to="/examples">
              {{ $t('menu.cases') }}
            </NuxtLink>
          </li>
          <li>
            <NuxtLink to="/news">
              {{ $t('menu.news') }}
            </NuxtLink>
          </li>
          <li>
            <NuxtLink to="/contact">
              {{ $t('menu.contact_us') }}
            </NuxtLink>
          </li>
        </ul>
      </div>
      <div class="right-section flex items-end text-[20px]">
        <ul class="info mr-[32px] pb-[14px]">
          <li data-aos="fade-up">
            <img m="r-[32px]" w="[24px]" h="[24px]" src="~/assets/img/icon_phone.png" />
            <span>{{ $t('label.phone') }}: {{ company?.phone }}</span>
          </li>
          <li data-aos="fade-up" data-aos-delay="100">
            <img m="r-[32px]" w="[24px]" h="[24px]" src="~/assets/img/icon_mail.png" />
            <span>{{ $t('label.email') }}: {{ company?.email }}</span>
          </li>
          <li data-aos="fade-up" data-aos-delay="200">
            <img m="r-[32px]" w="[24px]" h="[24px]" src="~/assets/img/icon_location.png" />
            <span>{{ $t('label.address') }}: {{ get(company, 'address', locale) }}</span>
          </li>
        </ul>
        <div class="flex-shrink-0" data-aos="fade-left">
          <img class="h-[160px] w-[160px]" :src="resolveImgURL(company?.weixin_url)" alt="">
        </div>
      </div>
    </div>
    <div m="t-[24px]" text="[16px] [#ffffff99]">
      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="flex items-center">
        <img :src="beianImg" alt="" class="mr-2 w-[18px]"> {{ webSite?.record_number }} {{ webSite?.copyright }}</a>
    </div>
  </div>
  <div p="max-md:x-[20px] max-md:t-[64px] max-md:b-[96px]" bg="[rgb(44,44,44)] [url(~/assets/img/bg_footer.png)] cover no-repeat" text="[#fff]" class="hidden max-md:block">
    <div>
      <img class="max-md:mb-[20px] max-md:w-[120px]" :src="resolveImgURL(company?.logo_url)" />
    </div>
    <h3 class="leading-[30px] max-md:mb-[20px] max-md:text-[16px]">
      {{ get(company, 'name', locale) }}
    </h3>
    <ul class="info pb-[14px] max-md:mb-[14px] max-md:text-[14px]">
      <li class="animate__animated animate__fadeInUp">
        <img m="max-md:r-[6px]" w=" max-md:[16px]" h="max-md:[16px]" src="~/assets/img/icon_phone.png" class="align-top" />
        <span>{{ $t('label.phone') }}: {{ company?.phone }}</span>
      </li>
      <li class="animate__animated animate__fadeInUp align-top">
        <img m="max-md:r-[6px]" w=" max-md:[16px]" h="max-md:[16px]" src="~/assets/img/icon_mail.png" class="align-top" />
        <span>{{ $t('label.email') }}: {{ company?.email }}</span>
      </li>
      <li class="animate__animated animate__fadeInUp align-top">
        <img m="max-md:r-[6px]" w="max-md:[16px]" h="max-md:[16px]" src="~/assets/img/icon_location.png" class="align-top" />
        <span>{{ $t('label.address') }}: {{ get(company, 'address', locale) }}</span>
      </li>
    </ul>
    <div class="w-full flex justify-center max-md:mb-[14px]">
      <img class="max-md:h-[80px] max-md:w-[80px]" :src="resolveImgURL(company?.weixin_url)" alt="">
    </div>
    <div m="t-[24px]" text="max-md:[16px] [#ffffff99]" leading="max-md:[24px]" font="normal">
      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="flex items-center">
        <img :src="beianImg" alt="" class="mr-2 w-[18px]"> {{ webSite?.record_number }} {{ webSite?.copyright }}</a>
    </div>
  </div>
</template>

<style scoped lang="postcss">
.links {
  li {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 16px;
    &:first-child {
      padding-left: 0;
    }
  }
  li + li {
    &::before {
      content: '';
      position: absolute;
      left: 0;
      display: inline-block;
      width: 1px;
      height: 16px;
      background: rgba(255, 255, 255, 0.3);
    }
  }
}
.info {
  li {
    display: flex;
    align-items: center;
  }
  li + li {
    margin-top: 24px;
  }
  img {
    display: inline-block;
  }
}
</style>
